<template>
	<div class="Pc_enroll">
		<div class="Pc_enroll2">
			<div class="pc_usrPic">
				<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
					:show-file-list="true" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
			<div class="pc_username">
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="300px"
					class="demo-ruleForm">
					<el-form-item label="账号" prop="username">
						<el-input v-model="ruleForm.username"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input type="password" v-model="ruleForm.password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="password2">
						<el-input type="password" v-model="ruleForm.password2"></el-input>
					</el-form-item>
					<el-form-item label="姓名昵称" prop="username2">
						<el-input v-model="ruleForm.username2" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机号码" prop="phone">
						<el-input type="phone" v-model="ruleForm.phone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="客户类型" prop="region">
						<el-select v-model="ruleForm.region" placeholder="请选择客户类型">
							<el-option label="普通用户" value="2"></el-option>
							<el-option label="VIP客户" value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="活动形式" prop="desc">
						<el-input type="textarea" v-model="ruleForm.desc"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {

			var validatepassword = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					setTimeout(() => {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('password');
					}
					})
					callback();
				}
			};
			var validateusername = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入账号'));
				} else {
					setTimeout(() => {
						if (this.ruleForm.checkPass !== '') {
							this.$refs.ruleForm.validateField('username');
						}
					})

					callback();
				}
			};
			var validateusername2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入姓名昵称'));
				} else {
					setTimeout(() => {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('username2');
					}
					})
					callback();
				}
			};
			var validatephone = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入手机号'));
				} else {
					setTimeout(() => {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('phone');
					}
					})
					callback();
				}
			};
			var validateregion = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请选择用户类型'));
				} else {
					setTimeout(() => {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('region');
					}
					})
					callback();
				}
			};
			var validatepassword2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value != this.ruleForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				imageUrl: '',
				ruleForm: {
					region: '',
					username: '',
					password: '',
					password2: '',
					username2: '',
					phone: '',
					desc: ''
				},
				rules: {
					region: [{
						required: true,
						validator: validateregion,
						trigger: 'blur'
					}],
					username: [{
						required: true,
						validator: validateusername,
						trigger: 'blur'
					}],
					username2: [{
						required: true,
						validator: validateusername2,
						trigger: 'blur'
					}],
					password: [{
						required: true,
						validator: validatepassword,
						trigger: 'blur'
					}],
					password2: [{
						required: true,
						validator: validatepassword2,
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						validator: validatephone,
						trigger: 'blur'
					}],
					desc: [{
						message: '请填写活动形式',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			submitForm(formName) {
				console.log(this.ruleForm)
				this.$refs[formName].validate((valid) => {
					console.log(valid);
					if (valid) {
						alert('submit!');

					} else {
						console.log(222)
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}

		}
	}
</script>

<style>
	.Pc_enroll {
		width: 100%;
		align-items: center;
		justify-content: space-between;
	}

	.Pc_enroll2 {
		display: flex;
		border: solid red 1px;
		width: 90%;
		margin: auto;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 30rem;
		height: 70vh;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>